<template>
  <div class="tab-container">
    <h1>加班审批</h1>
    <el-table
    :data="tableData"
    style="width: 90%">
    <el-table-column
      prop="empName"
      label="员工"
      width="180">
    </el-table-column>
   
    <el-table-column
      prop="days"
      label="时间">
    </el-table-column>

    <el-table-column
      prop="auditStatusName"
      label="状态">
    </el-table-column>

    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-button type="primary" @click="action(scope.$index, scope.row)">操作</el-button>
      </template>
    </el-table-column>
  </el-table>
   
  <el-dialog title="审批操作" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="选择操作" :label-width="'120px'">
      <el-select v-model="form.auditStatus" placeholder="选择审批">
        <el-option  label="同意" :value="2"></el-option>
        <el-option  label="驳回" :value="3"></el-option>
      </el-select>
    </el-form-item>

  
    <el-form-item label="审批意见" :label-width="'120px'">
      <el-input v-model="form.auditOpinion" width="100px" autocomplete="off"></el-input>
      
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false; form = {}">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </div>
</el-dialog>

   </div>
</template>

<script>
import request from '@/utils/request';
export default {
  name: 'leave',
  data() {
    return {
          tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          status:"待审批",
          man:"张三"
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          status:"待审批",
          man:"李四"
        }],
        form: {},
        dialogFormVisible:false,
        leaveId:0
      } 
  },
  mounted(){
    this.auditlist();
  },
  methods:{
   async auditlist(){
      let res =  await request({
          url:"/admin/overtime/auditlist",
        })
        res.rows.forEach(item=>{
          if( item.auditStatus==1){
            item.auditStatusName = "待审批";
          }else if(item.auditStatus==2){
            item.auditStatusName = "审批通过";
          }else {
            item.auditStatusName = "审批不通过";
          }
        })
        console.log("列表是",res)
        this.tableData = res.rows;
    },
    action(index,row){
      this.dialogFormVisible = true;
     
      this.leaveId = row.leaveId;
      console.log("122",this.leaveId);
    },
   async save(){
      let res =  await request({
          url:"/admin/leave/audit",
          method:"post",
          data:{
            leaveId:this.leaveId,
            auditStatus:this.form.auditStatus,
            auditOpinion:this.form.auditOpinion
          }
        })
        console.log("点击了确定",res);
    }
  }
 
}
</script>

<style scoped>
  .tab-container{
    padding: 30px;
  }
</style>
